<script>
import { onMounted } from 'vue'
import { eventBus } from './eventBus.js'

export default {
  setup() {
    const loading = ref(false)
    const apiStatus = ref('待调用API')
    const responseData = ref('')
    const categories = ref([])

    // 获取课程类别列表
    const fetchCategories = async () => {
      loading.value = true
      apiStatus.value = '正在调用API获取课程类别...'

      try {
        console.log('开始获取课程类别...')
        const response = await api.items.getAll(5)
        console.log('课程类别API返回数据:', response)

        // 显示API返回状态
        apiStatus.value = '成功获取API数据'

        // 关键修复：正确处理后端响应格式（和AddCourse.vue保持一致）
        if (response?.errno !== 0 || !Array.isArray(response.data)) {
          console.error('API返回数据格式错误:', response)
          ElMessage.error('获取课程类别数据格式错误')
          loading.value = false
          return
        }

        // 使用response.data作为实际数据（而非直接使用response）
        const allCategories = response.data
        responseData.value = `返回数据类型: 数组, 返回数据长度: ${allCategories.length}`

        // 筛选前4个类别
        const top4Categories = allCategories.slice(0, 4)
        console.log('筛选后的前4个类别:', top4Categories)

        // 为每个类别获取对应的课程
        for (const category of top4Categories) {
          await fetchCoursesByCategory(category)
        }

        categories.value = top4Categories
        console.log('最终课程类别数据:', categories.value)
      } catch (error) {
        // 错误处理保持不变
        console.error('获取课程类别失败:', error)
        apiStatus.value = `API调用失败: ${error.message}`
        responseData.value = JSON.stringify(error).substring(0, 200) + '...'

        if (error.message.includes('ERR_FAILED')) {
          ElMessage.error('网络连接失败，请检查网络设置或稍后再试')
        } else if (error.response && error.response.status === 404) {
          ElMessage.error('请求的资源不存在')
        } else {
          ElMessage.error('获取课程类别失败，请稍后重试')
        }
      } finally {
        loading.value = false
      }
    }

    // 组件挂载时获取课程类别
    onMounted(() => {
      fetchCategories()
    })

    return {
      loading,
      apiStatus,
      responseData,
      categories,
      fetchCategories
    }
  }
}
</script>